<template>
    <div id="app-content">
      <ul>
        <li v-for="person in persons" v-on:click="person.show = !person.show">
          <span >{{ person.name }}</span>
          <span v-show="person.show">{{ person.job }}</span>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "app-content",
        data() {
            return{
                persons: [
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false},
                  { name: 'yt', job: '前端开发', show: false}
                ]
            }
        }
    }
</script>

<style scoped>
  ul {
    margin: 5%;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    margin: 10px;
    padding: 20px;
    flex-grow: 1;
    flex-basis: 200px;
    border: 2px solid #c5c3bd;
    list-style: none;
    font-size: large;
  }
  span {
    display: block;
  }
</style>
